import 'package:flutter/material.dart';

import 'colors.dart';
import 'main.dart';

class AddCard extends StatefulWidget {
  const AddCard({super.key});

  @override
  State<AddCard> createState() => _AddCardState();
}

class _AddCardState extends State<AddCard> {
  @override
  Widget build(BuildContext context) {
    scrW = MediaQuery.of(context).size.width;
    scrH = MediaQuery.of(context).size.height;



    return Scaffold(
      appBar: AppBar(
        title: Center(child: Text('Add New Cards')),
      ),
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 30),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Center(
              child: Container(
                child: Image.asset(
                  'images/addcards/2.jpg',
                  width: 200,
                  height: 200,
                ),
              ),
            ),
            Column(
              children: [
                const Align(
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      'Cardholder Name',
                      style: TextStyle(fontSize: 18),
                    )),
                const SizedBox(
                  height: 5,
                ),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 20),
                  height: 50,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15),
                      border:
                          Border.all(width: .5, color: AppColor.frameColor)),
                  child: const TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'John Doe',
                        hintStyle: TextStyle(
                          color: AppColor.frameColor,
                        )),
                  ),
                )
              ],
            ),
            Column(
              children: [
                const Align(
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      'Card Number',
                      style: TextStyle(fontSize: 18),
                    )),
                const SizedBox(
                  height: 5,
                ),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 20),
                  height: 50,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15),
                      border:
                          Border.all(width: .5, color: AppColor.frameColor)),
                  child: const TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'XXXX XXXX XXXX',
                        hintStyle: TextStyle(
                          color: AppColor.frameColor,
                        )),
                  ),
                )
              ],
            ),
            Column(
              children: [
                const Align(
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      'Card Type',
                      style: TextStyle(fontSize: 18),
                    )),
                const SizedBox(
                  height: 5,
                ),
                Container(
                  padding: EdgeInsets.only(left: 20, right: 10),
                  height: 50,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15),
                      border:
                          Border.all(width: .5, color: AppColor.frameColor)),
                  child: TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Choose one',
                        suffixIcon: Icon(Icons.arrow_drop_down_outlined),
                        hintStyle: TextStyle(
                          color: AppColor.frameColor,
                        )),
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Expiry',
                      style: TextStyle(fontSize: 18),
                    ),
                    const SizedBox(
                      height: 5,
                    ),
                    Container(
                      padding: EdgeInsets.only(left: 20, right: 10),
                      width: (scrW - 80) / 2,
                      height: 50,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          border: Border.all(
                              width: .5, color: AppColor.frameColor)),
                      child: TextField(
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: 'MM/YY',
                            hintStyle: TextStyle(
                              color: AppColor.frameColor,
                            )),
                      ),
                    )
                  ],
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Align(
                        alignment: Alignment.bottomLeft,
                        child: Text(
                          'CVV',
                          style: TextStyle(fontSize: 18),
                        )),
                    const SizedBox(
                      height: 5,
                    ),
                    Container(
                      padding: EdgeInsets.only(left: 20, right: 10),
                      height: 50,
                      width: (scrW - 80) / 2,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          border: Border.all(
                              width: .5, color: AppColor.frameColor)),
                      child: TextField(
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: 'XXX',
                            hintStyle: TextStyle(
                              color: AppColor.frameColor,
                            )),
                      ),
                    )
                  ],
                ),
              ],
            ),
            Container(
              height: 50,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                  color: AppColor.bottomColor),
              child: Center(
                  child: Text(
                'Add Card',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.w600),
              )),
            )
          ],
        ),
      ),
    );
  }
}
